<template>
    <view>
        <view class="inv-h-w">
            <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">当前订单</view>
            <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">历史订单</view>
        </view>

        <scrcoll-view scroll-y="true" class="scroll">
            <view class="buJu"  v-show="Inv == 0">
                <view class="swiper-item" v-show="Inv == 0" v-for="(item,index) in Arr" :key="item.index">
                    <view class="item1">
                        <view class="name">{{item.name}}</view>
                        <view class="Src">
                            <image :src="item.imgSrc"></image>
                        </view>
                        <view class="orderHao">
                            <text>编号：</text>
                            <text>{{item.id}}</text>
                        </view>
                        <view class="Time">
                            <text>单价：</text>
                            <text>{{item.price}}</text>
                        </view>
                    </view>
                    <view class="item1">
                        <view class="xiangQing">{{item.hint}}</view>
                        <view class="price">
                            <text>￥商品总价：</text>
                            <text>{{item.goodsPrice}}</text>
                        </view>
                        <button class="del" type="warn"  size="mini" @click="del(index)">删除订单</button>
                    </view>
                </view>
            </view>
        </scrcoll-view>
        <view class="bottom">
            <view class="bottomPrice">
                <text>￥合计价格：</text>
                <text :data="priceAll">{{priceAll}}</text>
            </view>
            <view>
                <navigator url="/pages/index/xiangQing/xiangQing" hover-class="navigator-hover">
                    <view class="payment">去支付</view>
                </navigator>
            </view>
        </view>
        <view class="cjOrder" v-show="Inv == 1">
            <view class="cjOrderList" v-for="(item , id) in cjData" :key="id" @click="jumpDetails">
                <view class="cjOrderTitle">
                    <view>{{item.name}}</view>
                    <view class="cjFinish">交易完成</view>
                </view>
                <view class="cjContent">
                    <view class="cjImg">
                        <image :src="item.imgSrc" v-model="scaleToFill" class="cjImg_img"></image>
                    </view>
                    <view class="cjRemarkF">
                        <view class="cjRemark">{{item.remark}}</view>
                        <view class="priceBox">
                            <view class="cjText">单价：<text class="cjFinish">{{item.price}}</text></view>
                            <view class="cjText">数量：<text class="cjFinish">{{item.num}}</text></view>
                            <view class="cjText">总价：<text class="cjFinish">{{item.totalPrice}}</text></view>
                    </view>
                    </view>
                </view>
            </view>
        </view >
    </view>
</template>

<script>
    export default {
        data() {
            return {
                Arr:[],
                dingDanData:[],
                Inv:0,
                priceAll:0,
                //     :[
                //     {id:'001',name:'蔡徐坤奶茶',imgSrc:'http://101.37.175.158:8888/images/dd1.jpg',state:'交易完成',number:'2',price:'11',count:'22'},
                //     {id:'002',name:'惊雷奶茶',imgSrc:'http://101.37.175.158:8888/images/dd2.jpg',state:'交易完成',number:'7',price:'10',count:'70'},
                //     {id:'003',name:'充钱的少年',imgSrc:'http://101.37.175.158:8888/images/dd3.jpg',state:'交易完成',number:'5',price:'25',count:'125'},
                //     {id:'004',name:'鸡你太美',imgSrc:'http://101.37.175.158:8888/images/dd4.jpg',state:'交易完成',number:'5',price:'20',count:'100'},
                //     {id:'005',name:'金桔柠檬',imgSrc:'http://101.37.175.158:8888/images/dd19.jpg',state:'交易完成',number:'2',price:'11',count:'22'},
                //     {id:'006',name:'烧仙草',imgSrc:'http://101.37.175.158:8888/images/dd21.jpg',state:'交易完成',number:'3',price:'15',count:'45'},
                // ]
                cjData:[]
            }
        },
        onShow:function() {
            let arr = getApp().globalData.ddsendArr;
            this.Arr = arr;
            this.priceAll = 0;
            for (let i = 0; i < this.Arr.length; i++) {
                this.priceAll = this.Arr[i].goodsPrice + this.priceAll;
            }
        },
        created() {
            let arr = getApp().globalData.ddsendArr;
            // console.log(arr)
            // console.log(this.Arr)
            this.Arr = arr;
            this.cjData = arr;
            this.cjData.forEach(item=>{
                item.totalPrice= item.num*item.price
                console.log(item.totalPrice)
            })
        },
        methods: {
            //删除订单
            del(index){
                uni.showModal({
                    title: '提示',
                    content: '您确定要删除吗？',
                    success:(res)=> {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            changeTab(Inv){
                that.navIdx = Inv;
            },
            jumpDetails(){
                console.log(123);
                uni.navigateTo({
                    url:'dingdanDetails'
                })
            },
        }
    }
</script>

<style scoped>
    .inv-h-w{
        background-color: #FFFFFF;
        height: 70rpx;
        display: flex;
        width: 100%;
    }
    .inv-h-w1{
        background-color: #FFFFFF;
        height: 70rpx;

    }
    .inv-h{
        font-size: 30rpx;
        flex: 1;
        text-align: center;
        color: #C9C9C9;
        height: 70rpx;
        line-height: 70rpx;
    }
    .inv-h-se{
        color: #FF9014;
        border-bottom: 4rpx solid #FF9014;
    }
    page{
        background-color: #F2F2F2;
    }




    /*--------------cj的css--------------*/
    .cjOrder{
        background-color: rgba(248, 248, 248, 0.44);
    }
    .cjOrderList{
        margin: 10rpx;
        padding: 10rpx;
        width: 95%;
        height: 300rpx;
        background-color: #f8f8f8;
        display: flex;
        flex-direction: column;
    }
    .cjOrderTitle{
        padding: 0 20rpx;
        margin-top: 10rpx;
        width: 95%;
        display: flex;
        justify-content: space-between;
    }
    .cjImg{
        /*border: 1rpx solid red;*/
        height: 200rpx;
        width: 200rpx;
        background-color: cornflowerblue;
    }
    .cjImg_img{
        width: 100%;
        height: 100%;
    }
    .cjContent{
        margin-top: 20rpx;
        padding: 0 20rpx;
        width: 95%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .cjText{
        font-size: 27rpx;
    }
    .cjFinish{
        color: red;
    }
    .cjRemark{
        width: 100%;
        height: 50rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 25rpx;
        color: rgb(139, 139, 139);
    }
    .priceBox{
        margin-top: 50rpx;
        margin-left: 330rpx;
    }
    .cjRemarkF{
        width: 450rpx;
    }




    .swiper-item{
        display: flex;
        justify-content: space-between;
        width: 700rpx;
        margin: 25rpx auto;
        background-color: rgba(73,81,78,0.12);
        border: 1rpx solid #5475A3;
    }
    .item1{
        width: 300rpx;
        text-align: center;
    }
    .name,.Time,.Src,.orderHao{
        margin: 20rpx;
    }
    .xiangQing{
        margin-top: 20rpx;
        height: 50rpx;
        width: 290rpx;
        color: red;
        border: 1rpx solid #5475A3;
    }
    .price{
        margin-top: 241rpx;
        height: 50rpx;
        width: 290rpx;
        border: 1rpx solid #5475A3;
    }
    .Src{
        border: 1rpx solid #FEDE33;
        width: 200rpx;
        margin: auto;
        height: 200rpx;
    }
    .Src image{
        width: 200rpx;
        height: 200rpx;
    }
    .name{
        border: 1rpx solid #5475A3;
        height: 50rpx;
        width: 300rpx;
    }
    .Time{
        border: 1rpx solid #5475A3;
        height: 50rpx;
        width: 300rpx;
    }
    .orderHao{
        border: 1rpx solid #5475A3;
        height: 50rpx;
        width: 300rpx;
    }
    .del{
        margin-top: 15rpx;
        background-color:#FA654F;
    }
    .bottom{
        position:fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        height: 80rpx;
        width:100%;
        background-color:#cfaa79;
    }
    .bottomPrice{
        text-align: center;
        width: 400rpx;
        line-height: 80rpx;
    }
    .scroll{
        height: 800rpx;
        width: 100%;
        border: 1rpx solid #FA654F;
    }
    .payment {
        width: 200rpx;
        height: 60rpx;
        background-color: #FA654F;
        border-radius: 30rpx;
        margin: 10rpx auto ;
        text-align: center;
        line-height: 60rpx;
    }
</style>